<template>
    <div class="product-add" v-loading="loading">
        <!--form表单-->
        <div class="common-form">购买记录详情</div>
       <el-table :data="gridData">
            <el-table-column prop="name" label="优惠券名称"></el-table-column>
            <el-table-column prop="color" label="优惠券颜色">
                <template #default="scope">
                    <el-tag>{{colorOptions[scope.row.color]}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="couponType" label="优惠券类型" >
                <template #default="scope">
                    <el-tag>{{couponTypeOptions[scope.row.couponType]}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="cancelType" label="核销类型" >
                <template #default="scope">
                    <el-tag>{{hxOptions[scope.row.cancelType]}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="reducePrice" label="满减券-减免金额" ></el-table-column>
            <el-table-column prop="discount" label="折扣券-折扣率(0-100)"></el-table-column>
            <el-table-column prop="couponPrice" label="优惠券价格"></el-table-column>
       </el-table>
       <div class="common-button-wrapper">
            <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        </div>
    </div>
</template>
<script>
import PackageApi from '@/api/package'
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            colorOptions:{
                10:'蓝色',
                20:'红色',
                30:'紫色',
                40:'黄色'
            },
            couponTypeOptions:{
                10:'满减券',
                20:'折扣券',
                30:'核销券',
                40:'商品券',
                50:'购买券',
                60:'充值券'
            },
            hxOptions:{
               0:'肥料券',
               1:'参观券',
               2:'指导券'

            },
            //0-肥料券 1-参观券 2-指导券
            //优惠券颜色(10蓝色 20红色 30紫色 40黄色)
            //优惠券类型(10满减券 20折扣券 30核销券 40商品券 50购买券 60充值券)
            gridData: [],
            loading: false
        };
    },
    created() {
        const id = this.$route.query.id
        this.getDetail(id)
    },

    methods: {
        getDetail(id) {
            const $this = this
            $this.loading = true
            PackageApi.getCouponPackRecordDetail(id)
                .then(result => {
                    $this.loading = false
                    $this.gridData = result.data
                     console.log('详情数据', result)
                })
        },
        cancelFunc() {
            this.$router.go(-1)
        }
    },
};
</script>

<style lang="scss" scoped>
.product-add {
    padding-bottom: 50px;
}

.img {
    margin-top: 10px;
}
</style>